<template>
    <div class="common-layout">
        <el-container>
          <el-header>
            <el-button size="small" type="primary" :icon="Plus" @click="insertEvent(-1)">新建</el-button>
            <el-button size="small" type="danger" :icon="Delete" @click="deleteSelectEvent">删除</el-button>
            <el-button size="small" type="success" :icon="RefreshLeft">刷新</el-button>
            <el-input v-model="Fuzzy" size="small" style="width: 300px; margin-left: 10px;" placeholder="请输入内容">
                <template #append>
                    <el-button size="small" >模糊查询</el-button>
                </template>
            </el-input>
          </el-header>
          <el-main >
            <el-row >
              <el-col :span="16">
                <div style=" height: calc(100vh - 154px);">
                    <vxe-table
                        border
                        show-header-overflow
                        show-overflow
                        :align="allAlign"
                        ref="xTable"
                        size="mini"
                        height="auto"
                        :row-config="{isHover: true,isCurrent: true}"
                        @current-change="currentChangeEvent"
                        :data="lkAutocodeList">
                        <vxe-column field="autoCodeName" title="自动编号名称"></vxe-column>
                        <vxe-column field="prefix" title="编号前缀"></vxe-column>
                        <vxe-column field="dateType" title="日期部分"></vxe-column>
                        <vxe-column field="seedLength" title="流水号位数"></vxe-column>
                        <vxe-column field="seedStart" title="起始编号"></vxe-column>
                        <vxe-column field="memo" title="备注"></vxe-column>
                    </vxe-table>
                </div>
              </el-col>
              <el-col :span="8">
                <el-form ref="zdh" size="small" :model="formdata" label-width="100px">
                    <el-form-item label="编号名称">
                        <el-input style="width:230px" size="small" v-model="formdata.autoCodeName"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input type="textarea" resize="none" v-model="formdata.memo"></el-input>
                    </el-form-item>
                  <el-form-item label="生成时机">
                    <el-select v-model="formdata.runBeforeSave" placeholder="请选择时机">
                      <el-option label="前端新增表单" :value="0"></el-option>
                      <el-option label="后端保存表单" :value="1"></el-option>
                    </el-select>
                  </el-form-item>
                    <el-form-item label="编号前缀">
                        <el-input style="width:230px" v-model="formdata.prefix" placeholder="请选择编号前缀"></el-input>
                    </el-form-item>
                    <el-form-item label="日期部分">
                        <el-select v-model="formdata.dateType" placeholder="请选择日期"  @change="changedate" clearable>
                          <el-option label="y" value="y"></el-option>
                          <el-option label="ym" value="ym"></el-option>
                          <el-option label="ymd" value="ymd"></el-option>
                          <el-option label="Y" value="Y"></el-option>
                          <el-option label="Ym" value="Ym"></el-option>
                          <el-option label="Ymd" value="Ymd"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="流水号位数">
                      <el-input-number v-model="formdata.seedLength" :min="1" :max="100"  @change="changedate" label="描述文字"></el-input-number>
                    </el-form-item>
                    <el-form-item label="示例">
                      <el-input style="width:230px" readonly v-model="showtext"></el-input>
                    </el-form-item>
                    <el-form-item label="起始编号">
                      <el-input-number v-model="formdata.seedStart" :min="1" @change="changedate" label="描述文字"></el-input-number>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="save">保存</el-button>
                    </el-form-item>
                </el-form>
                <el-tabs type="border-card" size="small" v-if="false">
                    <el-tab-pane label="在用模版列表">在用模版列表</el-tab-pane>
                    <el-tab-pane label="废号管理">废号管理</el-tab-pane>
                    <el-tab-pane label="重设顺序号">重设顺序号</el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
    </div>
</template>

<script>
import {onBeforeMount, reactive, ref, toRefs} from "vue"
import {addLkAutocode, delLkAutocode, listLkAutocode, updateLkAutocode} from "/@/api/linkoo/numbering"
import XEUtils from "xe-utils"
import {Delete, Plus, RefreshLeft} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'

export default {
    setup(props) {
        let state = reactive({
            activeName:"first",
            Fuzzy:"",
            showtext:"",
            allAlign: null,
            formdata:{
              autoCodeID: 0,
              autoCodeName: undefined,
              prefix: '',
              sysVar: 0,
              dateType: undefined,
              seedLength: undefined,
              seedStart: undefined,
              runBeforeSave: undefined,
              allowMore: undefined,
              allowBatch: undefined,
              reuseType: undefined,
              createUser: undefined,
              createTime: undefined,
              iSActive: undefined,
                memo: undefined,
            },
            lkAutocodeList: []
        })
        onBeforeMount(()=>{
            getList()
        })
        // 行选中事件
        const currentChangeEvent= ({ row })=> {
            state.formdata=row
            changedate()
        }
        const getList = ()=>{
            listLkAutocode({  pageNum: 1,pageSize: 1000, }).then(response => {
                state.lkAutocodeList = response.data.list;
                state.total = response.data.total;
            });
        }
        const changedate = ()=>{
            let text = XEUtils.toValueString(state.formdata.dateType)
            let s=text
            if(text.indexOf('Y')>-1){
                text=text.replace("Y","yy")
            }
            text=text.replace("m","M")
            let arr=text.split("")
            text=""

            for(let i=0;i<(arr.length);i++){
                text+=arr[i].repeat(2)
            }
            state.showtext=(state.formdata.prefix+(s!==''?XEUtils.toDateString(new Date(),text):'')+ XEUtils.padStart(state.formdata.seedStart,state.formdata.seedLength, '0'))
        }
        let zdh = ref(null)
        const save=()=>{
            zdh.value.validate(valid => {
                if (valid) {
                if (state.formdata.autoCodeID !== 0) {
                    updateLkAutocode(state.formdata).then(response => {
                    if (response.code === 0) {
                        ElMessage({
                            type: 'success',
                            message: "修改成功",
                        })
                        state.open = false;
                        getList();
                    } else {
                        ElMessage({
                            type: 'error',
                            message: response.msg,
                        })
                    }
                    });
                } else {
                    addLkAutocode(state.formdata).then(response => {
                    if (response.code === 0) {
                        ElMessage({
                            type: 'success',
                            message: "新增成功",
                        })
                        state.open = false;
                        getList();
                    } else {
                        ElMessage({
                            type: 'error',
                            message: response.msg,
                        })
                    }
                    });
                }
                }
            });
        }
        const deleteSelectEvent = ()=>{
            delLkAutocode(state.formdata.autoCodeID).then(response => {
                if (response.code === 0) {
                    ElMessage({
                        type: 'success',
                        message: "删除成功",
                    })
                    state.open = false;
                    getList();
                } else {
                    ElMessage({
                        type: 'error',
                        message: response.message,
                    })
                }
            });


        }
        let xTable = ref(null)
        const insertEvent = async ()=>{
            reset()
            const $table = xTable.value
            const { row: newRow } = await $table.insertAt(state.formdata,-1)
            $table.setCurrentRow(newRow)
            state.formdata=newRow
        }
        const reset = ()=>{
            state.formdata= {
                autoCodeID: 0,
                autoCodeName: undefined,
                prefix: undefined,
                sysVar: 0,
                dateType: undefined,
                seedLength: undefined,
                seedStart: undefined,
                runBeforeSave: undefined,
                allowMore: undefined,
                allowBatch: undefined,
                reuseType: undefined,
                createUser: undefined,
                createTime: undefined,
                iSActive: undefined,
                memo: undefined,
            }
        }
        return{
            Delete,Plus,RefreshLeft,zdh,xTable,
            ...toRefs(state),
            getList,
            changedate,
            currentChangeEvent,
            save,
            insertEvent,
            deleteSelectEvent,
            reset
        }
    }
}
</script>

<style scoped>
 .el-header,.el-main{
    margin: 0;padding: 0;
}
.el-header{
    height: auto;
    padding-bottom: 10px;
}
</style>